<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="javax.servlet.http.HttpServletRequest"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>投保车辆</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<!-- 添加到桌面快捷方式小图标 -->
<link rel="apple-touch-icon-precomposed" href="#">
<!-- 指定快捷方式标题 -->
<meta name="apple-mobile-web-app-title" content="志惠科技">
	<script src="${ctx}/js/jquery-1.9.1.min.js"></script>
	<script src="${ctx}/js/index.js"></script>
	<script src="${ctx}/js/auto_insurance.js"></script>
	<link rel="stylesheet" href="${ctx}/css/reset.css">
	<link rel="stylesheet" href="${ctx}/css/auto_insurance.css">
</head>
<style>
	#verify_content + span {position: absolute;right: 3%;top: 15%;}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
    	-webkit-appearance: none !important;
    	margin: 0;
	}
	.car_user_name::-webkit-input-placeholder{
		color:red;
	}
	.licenseNo::-webkit-input-placeholder{
		color:red;
	}
	.car_user_phone::-webkit-input-placeholder{
		color:red;
	}
	.verify_content::-webkit-input-placeholder{
		color:red;
	}
</style>
<body class="body_bg">
	<div class="index_head"><img src="${ctx}/images/img_index_head.jpg"/></div>
	<ul class="index_list">
		<li><em>车主姓名</em><input id="car_user_name" onFocus="outname()" type="text" placeholder="请输入车主姓名" /></li>
		<li><em>车牌号码</em><input id="licenseNo" onFocus="outlicenseNo()" type="text" placeholder="沪123543"/></li>
		<li><em>手机号码</em><input onBlur="phone()" onFocus="outphone()" id="car_user_phone" type="number" placeholder="请输入您的手机号" value=""/></li>
		<li style="position: relative;"><em>验证码</em><input id="verify_content" onFocus="verifycon();" type="text" placeholder="输入手机验证码" value=""/><span><button style="background: #FFF;color:#ff6000; width:100%;" id="btnSendCode" onclick="verify();">获取验证码</button></span></li>
	</ul>
	<input type="hidden" id="openId" value="${openId}"/>
	<input type="hidden" id="verifycon" value="${openId}"/>
	<a href="#" class="policy_details_btn" onclick="toSubmit()">确定</a>
	<!--弹层开始-->
	<div class="lazy_zhezhaoceng" style="display: none;"></div>
	<div class="lazy_top" style="display: none;">
		<ul class="clearfix">
			<li class="dot1"></li>
			<li class="dot2"></li>
			<li class="dot3"></li>
			<li class="dot4"></li>
			<li class="dot5"></li>
		</ul>
		<em>提交中，请稍等……</em>
	</div>
	<div class="index_top_fix" style="display: none;"></div><!--遮罩层-->
	<div class="index_top_container" style="display: none;">
		<h1>请选择您爱车的具体型号</h1>
		<!--  <p class="clearfix"><input type="radio" name="carKind" value="1" id="kind1" checked="checked"/><label for="kind1">一汽大众速腾1.6L 2004款</label><i class="fr">128000元</i></p>
		<p class="clearfix"><input type="radio" name="carKind" value="2" id="kind2"/><label for="kind2">一汽大众速腾1.6L 2004款</label><i class="fr">128000元</i></p>
		<p class="clearfix"><input type="radio" name="carKind" value="3" id="kind3"/><label for="kind3">一汽大众速腾1.6L 2004款</label><i class="fr">128000元</i></p> 原有样式-->
		<div class="index_top_btn clearfix" id="rerry">
			<span class="fl">没有找到</span>
			<span class="fr" id='submi'>提交</span>
		</div>
	</div>
	<!--弹层结束-->
</body>
<script type="text/javascript">
function toSubmit(){
	var ble = true; 
	var s = $('#licenseNo').val();
	var son_char = s.substr(0,2);
	if(/^[\u4e00-\u9fa5]+$/.test(son_char)){
		$("#licenseNo").val("");
		$("#licenseNo").attr("class","licenseNo");
		$("#licenseNo").attr("placeholder","车牌号错误");
		ble = false;
	}

	if($("#car_user_phone").val() == ""||$('#car_user_name').val()==""||$('#licenseNo').val()==""&&!($("#verifycon").val()==$('#verify_content').val())){
		if($("#verifycon").val()==$('#verify_content').val()){
		}else{
			$("#car_user_phone").attr("class","car_user_phone");
			$("#car_user_phone").attr("placeholder","手机号有误");
		};
		name();
		licenseNo();
		phone();
		ble = false;
		return;
	}
	if($('#verify_content').val()==""){
		$("#verify_content").attr("class","verify_content");
		$("#verify_content").attr("placeholder","验证码不能为空");
		ble = false;
		return;
	}
	if(!ph()){
		phone();
		ble = false;
		return;
	}
	if(ble){
		submit();
	};
}
function ph(){
	if(!$("#car_user_phone").val().match(/^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$/)){
		return false;
	}else{
		return true;
	}
}
//提交信息
function submit(){
//	调取弹层
	$(".lazy_zhezhaoceng,.lazy_top").show();
	$(".index_top_fix").show();
	var parm = {
		"car_user_name":$('#car_user_name').val(),
		"licenseNo":$('#licenseNo').val(),
		"car_user_phone":$('#car_user_phone').val(),
		"verify_content":$('#verify_content').val(),
		"openId":$('#openId').val(),
	};
	$.post('${ctx}/indexto',parm,function(date){
		$(".lazy_zhezhaoceng,.lazy_top").hide();
		$('.index_top_fix,.index_top_container').show();
		if(date==1||date==2){
			var html = "<h1>请选择您爱车的具体型号</h1>";
			var foot = "<div class='index_top_btn clearfix'><span class='fl'><a href='#' style='text-decoration:none;color:#FFFFFF' id='eorre'>没有找到</a></span><span class='fr'>提交</span></div>";
			html = html+foot;
			$('.index_top_container').html(html);
			$(document).ready(function(){
				$('#eorre').click(function(){
					window.location.href="${ctx}";
				});
			});
		}else{
			var html = "<div class='index_top_fix' style='display: none;'></div><!--遮罩层--><h1>请选择您爱车的具体型号</h1>";
			for(var i=0; i<date.length; i++){
				if(i==0){
					html = html + "<p class='clearfix'><input type='radio' name='carKind' value='"+date[i].modelCode+"' id='kind1' checked='checked'/><label for='kind1'>"+date[i].vehicleDescription+"</label><i class='fr'>"+date[i].replacementValue+"元</i></p>";
				}else{
					html = html + "<p class='clearfix'><input type='radio' name='carKind' value='"+date[i].modelCode+"' id='kind1'/><label for='kind1'>"+date[i].vehicleDescription+"</label><i class='fr'>"+date[i].replacementValue+"元</i></p>";
				}
			}
			var foot = "<div class='index_top_btn clearfix'><span class='fl'>没有找到</span><span class='fr' id='submi'><a href='#' style='text-decoration:none;color:#FFFFFF'>提交</a></span></div>";
			html = html+foot;
			$('.index_top_container').html(html);
			$(document).ready(function(){
				$('#submi').click(function(){
					$(".lazy_top,.lazy_zhezhaoceng").show();
					$(".index_top_fix").show();
					var modelCode = $("input[name='carKind'][type='radio']:checked").val();
					var parm={
							"modelCode":modelCode,
							"car_responsebody_id":date[0].car_responsebody_id,
					};
					$.get("${ctx}/show",parm,function(data){
						if(data.code=="1"){
							alertmsg(data.appMessage, function() {
								window.location.href="${ctx}";
							});
						}else{
							window.location.href="${ctx}/show?car_responsebody_id="+date[0].car_responsebody_id+"&modelCode="+modelCode;
						}
					});
				});
			});
		}
	});
}
//倒计时
var tim=60; 
var curCount;
var InterValObj;
//验证码提交
function verify(){
	if(!ph()){
		$("#car_user_phone").attr("class","car_user_phone");
		$("#car_user_phone").attr("placeholder","手机号有误");
	}else{
		yanzheng();
	};
};
function yanzheng(){
	curCount=tim;
	var parm = {
			"car_user_phone":$('#car_user_phone').val(),
	};
	$.post("${ctx}/verify",parm,function(data){
		alertmsg(data.verify_content);
		$("#verify_content").val("").focus();
		$("#verifycon").val(data.verify_content);
		if(data.result=="0"){
			// 设置button效果，开始计时
			$("#btnSendCode").attr("disabled", "true");
 			$("#btnSendCode").css({"background":"#dbdbdb","color":"#fff"}).parent().css("background","#dbdbdb");
			$("#btnSendCode").html("重新发送("+curCount+")");
			InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次
		}else{
			$("#car_user_phone").attr("class","car_user_phone");
			$("#car_user_phone").attr("placeholder","手机号有误");
		}
	});
}
//timer处理函数
function SetRemainTime() {
	if (curCount == 0) {                
		window.clearInterval(InterValObj);// 停止计时器
		$("#btnSendCode").removeAttr("disabled");// 启用按钮
		$("#btnSendCode").css({"background":"#fff","color":"#ff6000"}).parent().css("background","#fff");
		$("#btnSendCode").html("获取验证码");
	}else {
		curCount--;
		$("#btnSendCode").css({"background":"#dbdbdb","color":"#fff"}).parent().css("background","#dbdbdb");
		$("#btnSendCode").html("重新发送("+curCount+")");
	}
};
</script>
</html>